import { useI18n } from '@/hooks/web/useI18n'
import { reactive, ref, h } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'

const { t } = useI18n()
import { SchemaConfig } from '@/api/global/types'
import { getSearchCityApi } from '@/api/warehouse'
import { getSelectApi } from '@/api/transactionCurrency'

interface Option {
  label: string
  value: string | number // 具体取决于你的数据
}

// const list = ref<Option[]>([])
const cityOption = ref<Option[]>([])
const { required } = useValidator()
const createOptions = (enumObject: { [key: string]: string }): Option[] => {
  return Object.keys(enumObject).map((key) => ({
    label: enumObject[key],
    value: parseInt(key, 10)
  }))
}

export default function (schemaConfig: SchemaConfig | any) {
  const statusOption = reactive(createOptions(schemaConfig?.fieldEnum?.value?.status || {}))
  const clearanceOption = reactive(
    createOptions(schemaConfig?.fieldEnum?.value?.is_customs_clearance || {})
  )
  const countryOption = schemaConfig?.selectEnum?.value.country || []
  const firstWarehouseOption = schemaConfig?.selectEnum?.value.parent || []
  // const cityOption = reactive(createOptions(schemaConfig?.selectEnum?.value.city || {}))

  const remoteMethod = (query: string) => {
    if (query) {
      getSearchCityApi({ name: query })
        .then((res) => {
          cityOption.value = res.data.map((item) => ({
            label: item.name,
            value: item.id
          }))
        })
        .catch((error) => {
          console.error('API call failed', error)
        })
      // setTimeout(() => {
      //   cityOption.value = list.value.filter((item) => {
      //     return item.label.toLowerCase().includes(query.toLowerCase())
      //   })
      // }, 200)
    } else {
      cityOption.value = []
    }
  }

  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('warehouse.id'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        width: 60,
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'name',
      label: t('warehouse.name'),
      align: 'center',
      search: {
        // hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        width: 180,
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'fl_warehouse_id',
      label: t('warehouse.fl_warehouse_id'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: firstWarehouseOption
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.fl_warehouse_name
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.fl_warehouse_name
          }
        }
      }
    },
    {
      field: 'is_customs_clearance',
      label: t('warehouse.is_customs_clearance'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: clearanceOption
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.is_customs_clearance_text
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.is_customs_clearance_text
          }
        }
      }
    },
    {
      field: 'transaction_currency_id',
      label: t('warehouse.transaction_currency_id'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          multiple: true,
          options: []
        },
        // 远程加载option
        optionApi: async () => {
          const res = await getSelectApi({})
          console.log(res.data)
          return res.data.list
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.is_customs_clearance_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.transaction_currency_id_text
          }
        }
      }
    },
    {
      field: 'country',
      label: t('warehouse.country'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: countryOption,
          filterable: true
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.country_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.country_value
          }
        }
      }
    },
    {
      field: 'city',
      label: t('warehouse.city'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: cityOption,
          filterable: true,
          remote: true,
          remoteMethod: remoteMethod
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.city_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.city_value
          }
        }
      }
    },
    {
      field: 'state',
      label: t('warehouse.state'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'address',
      label: t('warehouse.address'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        hidden: true
      }
    },
    {
      field: 'support_selfpickup',
      label: '是否支持自提',
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            }
          ]
        },
        formItemProps: {
          rules: [required()]
        },
        value: 0
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.support_selfpickup === 1 ? '是' : '否'
          }
        }
      }
    },
    {
      field: 'pickup_address',
      label: '自提地址',
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'remark',
      label: t('warehouse.remark'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'creator_value',
      label: t('warehouse.creator'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'create_time',
      label: t('warehouse.create_time'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'update_time',
      label: t('warehouse.update_time'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'updater_value',
      label: t('warehouse.updater'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'contact_name',
      label: t('warehouse.contact_name'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'contact_phone',
      label: t('warehouse.contact_phone'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'show_name',
      label: t('warehouse.show_name'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'status',
      label: t('warehouse.status'),
      search: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            }
          ]
        },
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '是',
              value: 1
            },
            {
              label: '否',
              value: 0
            }
          ]
        },
        formItemProps: {
          rules: [required()]
        },
        value: 1
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.status === 1 ? '是' : '否'
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return h('span', data.status === 1 ? '是' : '否')
          }
        }
      }
    },
    {
      field: 'action',
      width: (schemaConfig?.actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaConfig?.actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
